<template>
  <div class="wrapper-contion">
    <div class="wrapper"></div>
    <div class="wrapper-white">
      <span class="top-Title">数字化--智能工厂的核心要素之一</span>
      <span class="top-sub" style="text-indent: 2em">
        数字化工厂或智能制造的核心要素之一是实现生产资源、制造过程、现场运行、质量管控、物料管控的数字化。这需要将以上这些静态的、固态的实体进行量化、收集、存储、转化、处理。</span
      >
      <div class="top-back wow fadeInRight" data-wow-duration="2s">
        <span class="top-back-txt">{{ topArr[index].txt }}</span>
      </div>
      <div class="top-round">
        <van-image
          width="100%"
          height="100%"
          fit="cover"
          src="https://oss.cloudcpc.com/e3c8aaf1c3423027b977f87dc622777c.png"
        />
      </div>
      <div
        class="top-round1"
       @click="chooseTxt(0)"
        :style="{
          background:
            'url(' +
            (index == 0
              ? 'https://oss.cloudcpc.com/d85aeb82827c3d1caa49279e3f3f3515.png'
              : 'https://oss.cloudcpc.com/809aa8921c5a39ee8c157fe440bdd77b.png') +
            ')',
          backgroundSize: 'cover'
        }"
      >
        员工
      </div>
      <div
        class="top-round2"
        @click="chooseTxt(4)"
        :style="{
          background:
            'url(' +
            (index == 4
              ? 'https://oss.cloudcpc.com/d85aeb82827c3d1caa49279e3f3f3515.png'
              : 'https://oss.cloudcpc.com/809aa8921c5a39ee8c157fe440bdd77b.png') +
            ')',
          backgroundSize: 'cover'
        }"
      >
        环境
      </div>
      <div
        class="top-round2 top-round3"
       @click="chooseTxt(3)"
        :style="{
          background:
            'url(' +
            (index == 3
              ? 'https://oss.cloudcpc.com/d85aeb82827c3d1caa49279e3f3f3515.png'
              : 'https://oss.cloudcpc.com/809aa8921c5a39ee8c157fe440bdd77b.png') +
            ')',
          backgroundSize: 'cover'
        }"
      >
        工艺
      </div>
      <div
        class="top-round4 top-round2"
        @click="chooseTxt(2)"
        :style="{
          background:
            'url(' +
            (index == 2
              ? 'https://oss.cloudcpc.com/d85aeb82827c3d1caa49279e3f3f3515.png'
              : 'https://oss.cloudcpc.com/809aa8921c5a39ee8c157fe440bdd77b.png') +
            ')',
          backgroundSize: 'cover'
        }"
      >
        物料
      </div>
      <div
        class="top-round5 top-round2"
        @click="chooseTxt(1)"
        :style="{
          background:
            'url(' +
            (index == 1
              ? 'https://oss.cloudcpc.com/d85aeb82827c3d1caa49279e3f3f3515.png'
              : 'https://oss.cloudcpc.com/809aa8921c5a39ee8c157fe440bdd77b.png') +
            ')',
          backgroundSize: 'cover'
        }"
      >
        设备
      </div>
      <div class="data-back">
        <div class="data-Title">纺织数据采集系统</div>
      </div>
      <div scroll-x="true" style="width: 100%; overflow-x: auto">
        <div class="div-item">
          <div class="target-view">
            <div v-for="(item, index) in txtArr" :key="index" class="wow fadeInRight"
             data-wow-duration="0.4s" :data-wow-delay="0.2+(index+1)/10+'s'">
              <div class="target-white-txt" :style="{ background: 'url(' + item.url + ')' }">
                <!-- <div class="target-white-sub" :style="{width: item.w+'px', fontSize:item.font+'rem'}"> -->
                 <div class="target-white-sub">
                  {{ item.txt }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div scroll-x="true" style="width: 100%; overflow-x: auto">
        <div class="div-item-list">
          <div class="data-down-view">
            <div v-for="(item, index) in DataArr" :key="index">
              <div class="target-list-white">
                <van-image width="100%" height="100%" fit="cover" :src="item.url" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="Data-img-back">
      <van-image
        width="592rpx"
        height="1056rpx"
        fit="cover"
        src="https://oss.cloudcpc.com/c33c25fbedb635e18835888fc2a4a660.png"
      />
    </div>
    <div class="Data-img-back2">
      <div scroll-x="true" style="width: 100%; overflow-x: auto">
        <div class="Data-img-back2-item">
          <van-image
            width="100%"
            height="100%"
            fit="cover"
            src="https://oss.cloudcpc.com/3362028207e733d6872d318c58ea41e0.png"
          />
        </div>
      </div>
    </div>
    <div class="module-wrapper">
      <span class="top-Title">模块功能</span>
      <span class="top-sub">
        SCADA
        模块负责对现场的所有运行设备进行监视和控制，以实现数据采集、设备控制、测量、参数调节以及各类信号报警等各项功能，同时，我们也把生产过程中，部分物料运转和生产过程状态控制的数据采集，也纳入该模块功能。</span
      >
      <div scroll-x="true" style="width: 100%; overflow-x: auto">
        <div class="module-item">
          <van-image
            width="100%"
            height="100%"
            fit="cover"
            src="https://oss.cloudcpc.com/a055d077329e306395248ed2ff6e8e04.png"
          />
        </div>
      </div>
    </div>
    <div class="terminal-wrapper">
      <span class="top-Title">多终端展示 全面高效管理</span>
      <div class="terminal-banner">
        <van-image
          width="100%"
          height="100%"
          fit="cover"
          src="https://oss.cloudcpc.com/c543d29849d53e419ba97a09bfedee98.png"
        />
      </div>
      <div class="terminal-list">
        <div class="terminal-list-left">
          <div class="terminal-list-left-round">
            <van-image
              width="100%"
              height="100%"
              fit="cover"
              src="https://oss.cloudcpc.com/44dac2b095d132f894af4a12d2d82d4a.png"
            />
          </div>
          <div class="terminal-list-left-line terminal-list-left-line1"></div>
          <div class="terminal-list-left-round">
            <van-image
              width="100%"
              height="100%"
              fit="cover"
              src="https://oss.cloudcpc.com/44dac2b095d132f894af4a12d2d82d4a.png"
            />
          </div>
        </div>
        <div class="terminal-list-right">
          <div class="terminal-list-num">
            <van-image
              width="100%"
              height="100%"
              fit="cover"
              src="https://oss.cloudcpc.com/e7a3c40faf7137a598013d21e75ccea7.png"
            />
          </div>
          <div class="terminal-list-txt">数据采集</div>
          <div class="terminal-list-sub">
            实现生产设备的实时信息自动采集。对于没有通讯接口的重要数据，可通过人工录入方式进入数据采集系统。
          </div>
          <div class="terminal-list-num terminal-list-num2">
            <van-image
              width="100%"
              height="100%"
              fit="cover"
              src="https://oss.cloudcpc.com/f1129dbfb04237309780e90c1219d994.png"
            />
          </div>
          <div class="terminal-list-txt">生产过程实时监测</div>
          <div class="terminal-list-sub">
            将实时数据全部汇聚于信息中心服务器中，在公司的局域网上发布，具有相应权限的用户可在局域网内浏览数据，生产数据采集系统还可自动生成相关数据报表。
          </div>
        </div>
      </div>
      <div class="terminal-banner">
        <van-image
          width="100%"
          height="100%"
          fit="cover"
          src="https://oss.cloudcpc.com/d32c97f8aef93f6ea4fda035358a337e.png"
        />
      </div>
      <div class="terminal-list">
        <div class="terminal-list-left2">
          <div class="terminal-list-left-round">
            <van-image
              width="100%"
              height="100%"
              fit="cover"
              src="https://oss.cloudcpc.com/44dac2b095d132f894af4a12d2d82d4a.png"
            />
          </div>
          <div class="terminal-list-left-line"></div>
          <div class="terminal-list-left-round">
            <van-image
              width="100%"
              height="100%"
              fit="cover"
              src="https://oss.cloudcpc.com/44dac2b095d132f894af4a12d2d82d4a.png"
            />
          </div>
        </div>
        <div class="terminal-list-right">
          <div class="terminal-list-num terminal-list-num3">
            <van-image
              width="100%"
              height="100%"
              fit="cover"
              src="https://oss.cloudcpc.com/0b7367ae3a343bdd87c6863ef227feff.png"
            />
          </div>
          <div class="terminal-list-txt">生产指标监测</div>
          <div class="terminal-list-sub">
            对采集的数据进行分析整理，把现场采集的实际数据与相关的生产指标项目进行对比，偏差过大时进行报警并记录。
          </div>
          <div class="terminal-list-num terminal-list-num3">
            <van-image
              width="100%"
              height="100%"
              fit="cover"
              src="https://oss.cloudcpc.com/3f56e7350a1b3c1784470f337e8184e2.png"
            />
          </div>
          <div class="terminal-list-txt">数据中心</div>
          <div class="terminal-list-sub">
            实时数据库可用于生产过程数据的自动采集、存储和监视，可存储多年历史数据，并提供客户端数据展示。统一的数据库，实现企业人员异地共享信息，客户端应用程序有效优化企业级实施管理，诸如工艺改进、质量控制、故障定位维护等。并可集成现有的ERP、MIS等应用系统，连接起业务管理和实时生产，更好地实现数字化管理。
          </div>
        </div>
      </div>
      <div class="terminal-banner">
        <van-image
          width="100%"
          height="100%"
          fit="cover"
          src="https://oss.cloudcpc.com/d3c1eead525a3104ad254a476324c670.png"
        />
      </div>
      <div class="terminal-list">
        <div class="terminal-list-left">
          <div class="terminal-list-left-round">
            <van-image
              width="100%"
              height="100%"
              fit="cover"
              src="https://oss.cloudcpc.com/44dac2b095d132f894af4a12d2d82d4a.png"
            />
          </div>
          <div class="terminal-list-left-line terminal-list-left-line5"></div>
          <div class="terminal-list-left-round">
            <van-image
              width="100%"
              height="100%"
              fit="cover"
              src="https://oss.cloudcpc.com/44dac2b095d132f894af4a12d2d82d4a.png"
            />
          </div>
          <div class="terminal-list-left-line terminal-list-left-line6"></div>
          <div class="terminal-list-left-round">
            <van-image
              width="100%"
              height="100%"
              fit="cover"
              src="https://oss.cloudcpc.com/44dac2b095d132f894af4a12d2d82d4a.png"
            />
          </div>
        </div>
        <div class="terminal-list-right">
          <div class="terminal-list-num terminal-list-num5">
            <van-image
              width="100%"
              height="100%"
              fit="cover"
              src="https://oss.cloudcpc.com/085ab58f89423ddb99ec331dedbf27e4.png"
            />
          </div>
          <div class="terminal-list-txt">生产数据采集系统与现有管理软件系统集成</div>
          <div class="terminal-list-sub">
            除了主动将数据送往关系库外，还能实时数据库还提供了各种开放接口，通过这些接口第三方程序可以访问数据平台中的实时数据、历史数据、统计数据等。
          </div>
          <div class="terminal-list-num terminal-list-num5">
            <van-image
              width="100%"
              height="100%"
              fit="cover"
              src="https://oss.cloudcpc.com/b37d9dee85733e85a3cde116a78ea480.png"
            />
          </div>
          <div class="terminal-list-txt">安全管理</div>
          <div class="terminal-list-sub">
            纺织行业生产数据采集系统提供了用户和安全区的机制对系统进行保护。该机制不但能保护应用系统的数据，还能对应用应用系统上的操作进行保护。
          </div>

          <div class="terminal-list-num terminal-list-num7">
            <van-image
              width="100%"
              height="100%"
              fit="cover"
              src="https://oss.cloudcpc.com/e6d4e05e53fb3e35bdd0169f42290aa7.png"
            />
          </div>
          <div class="terminal-list-txt">故障恢复</div>
          <div class="terminal-list-sub">
            纺织行业生产数据采集系统提供故障恢复功能。这里的故障是指实时数据库在运行过程中，由于外部原因造成硬件故障。故障恢复则是指在硬件故障排除后，系统不需要人为干预，而能继续正常运行其中包括系统恢复和数据恢复。
          </div>
        </div>
      </div>
    </div>
    <div class="characteristic-wrapper">
      <span class="top-Title">技术特点</span>
      <div class="map">
        <van-image
          width="100%"
          height="100%"
          fit="cover"
          src="https://oss.cloudcpc.com/37bf832311e83dab8a81a3406b22db31.png"
        />
      </div>
      <div class="characteristic-list">
        <div class="characteristic-list-left">
          <div v-for="(item, index) in listArr[0]" :key="index" class="wow fadeInUp">
            <div class="characteristic-list-white">
              <div class="characteristic-list-img">
                <van-image width="100%" height="100%" fit="cover" :src="item.url" />
              </div>
              <div class="characteristic-list-txt">{{ item.txt }}</div>
              <div class="characteristic-list-sub">{{ item.sub }}</div>
            </div>
          </div>
        </div>
        <div class="characteristic-list-right">
          <div v-for="(item, index) in listArr[1]" :key="index" class="wow fadeInUp">
            <div class="characteristic-list-white" :class="{ 'characteristic-list-s': index == 0 }">
              <div class="characteristic-list-img">
                <van-image width="100%" height="100%" fit="cover" :src="item.url" />
              </div>
              <div class="characteristic-list-txt" :class="{ 'characteristic-list-txt-s': index == 0 }">
                {{ item.txt }}
              </div>
              <div class="characteristic-list-sub" :class="{ 'characteristic-list-txt-s': index == 0 }">
                {{ item.sub }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { WxShare } from '@/utils/share'
import { redirectUrl } from '@/utils/config'
import { WOW } from 'wowjs'
export default {
  data() {
    return {
      index: 0,
      topArr: [
        {
          txt: '谁？\n—— 属性、时间及动作数据'
        },
        {
          txt: '用什么设备、工装？\n—— 设备运行状态数据，性能表现数据，效率表现性数据'
        },
        {
          txt: '用什么物料、材料？\n—— 工艺执行数据'
        },
        {
          txt: '用什么方法、规则、标准？\n—— 属性、时间及动作数据'
        },
        {
          txt: '什么场合、什么状态？\n—— 场景数据、环境数据'
        }
      ],
      DataArr: [
        {
          url: 'https://oss.cloudcpc.com/1736a6dcabb9362eb854f0ee9573a6ee.png'
        },
        {
          url: 'https://oss.cloudcpc.com/734cec4af77c33f196a19c79c046cc07.png'
        },
        {
          url: 'https://oss.cloudcpc.com/94ec8e689f57334882662b6b2ce5944a.png'
        }
      ],
      txtArr: [
        {
          url: 'https://oss.cloudcpc.com/7a472d19f4bd316bb9a311ffa407c252.png',
          font: 0.22,
          w: 195/2,
          txt: '在纺纱机械上安装及配置多台数据采集通信网关。'
        },
        {
          url: 'https://oss.cloudcpc.com/1dc222dac43532de8bcd4baf9e7ffd31.png',
          font: 0.12,
          w: 240/2,
          txt: '数据采集通信网关通过以太网或串口等通讯方式将各个生产线的硬件设备（如PLC，板卡，仪表等）采集数据。'
        },
        {
          url: 'https://oss.cloudcpc.com/ba1e6612d09b367f9215fcc8fd9ea93e.png',
          font:0.15,
          w: 210/2,
          txt: '数据采集通信网关通过网口将数据经集团VPN专网传送到远端运营中心的通信服务器。'
        },
        {
          url: 'https://oss.cloudcpc.com/d30097b7bfc7323d8ead1d640c9e3976.png',
          font: 0.16,
          w: 195/2,
          txt: '数通信服务器将数据实时发送到数据库服务器，进行归档存储。'
        },
        {
          url: 'https://oss.cloudcpc.com/b7fdc4397b8d3c2ba5b882f512c79f40.png',
          font: 0.2,
          w: 195/2,
          txt: '应用服务器将汇集的中心数据进行二次加工及计算，回写数据存储区并保存。'
        }
      ],
      listArr: [
        [
          {
            animation: 'animation1',
            url: 'https://oss.cloudcpc.com/07fa718d0a933162afee1777d6d7229e.png',
            txt: '不限规模',
            sub: '充分考虑用户规模与数据规模的增长，做好数据资产积累的准备。'
          },
          {
            animation: 'animation2',
            url: 'https://oss.cloudcpc.com/8cdc5eac25be35169f1989addb693bbb.png',
            txt: '全量采集',
            sub: '多种数据源，多种方法全量采集，贯穿用户使用产品的整个生命周期。'
          },
          {
            animation: 'animation3',
            url: 'https://oss.cloudcpc.com/f8115a0128813d9a9fda2dae2c54e076.png',
            txt: '指标细化',
            sub: '采集足够全面的属性、维度、指标，让积累的数据资产更加优质。'
          }
        ],
        [
          {
            url: 'https://oss.cloudcpc.com/d392c3b5134939bc8dfe2601fda82559.png',
            txt: '时间快',
            sub: '1-3个月实现全部，埋点和数据采集。'
          },
          {
            url: 'https://oss.cloudcpc.com/24d8be063ba338718d8a265324ec0085.png',
            txt: '成本低',
            sub: '低价硬件结合，定制化软件服务。'
          },
          {
            url: 'https://oss.cloudcpc.com/3c0182174d003dc785657367bd020ea0.png',
            txt: '风险小',
            sub: '标准化硬件，非侵入式安装。'
          },
          {
            url: 'https://oss.cloudcpc.com/e5b6ded61fcc3575acb71fda254ea828.png',
            txt: '适配全',
            sub: '对接ERP、环境视频监控，和MES等外部系统。'
          }
        ]
      ]
    }
  },
  mounted() {
    this.$nextTick(() => {
      let wow = new WOW({
        boxClass: 'wow', /// 动画元件css类（默认为wow）
        animateClass: 'animated', // 动画css类（默认为animated）
        offset: 0, // 到元素距离触发动画（当默认为0）
        mobile: true, // 在移动设备上触发动画（默认为true）
        live: true // 对异步加载的内容进行操作（默认为true）
      })
      // wow.start()
      wow.init()
    })
    // WxShare({
    //   title: '云上展',
    //   desc: '数字展馆一站式服务，文化、品牌、科技、展示、互动、营销多位一体，量身定制虚拟数字解决方案！',
    //   link: `${redirectUrl}${fullPath}`,
    //   imgUrl: 'https://www.2025.net/share.png'
    // })
  },

  methods: {
      chooseTxt(e){
          console.log(e)
            this.index = e
            },

  }
}
</script>
<style lang="scss" scoped>
@import './index';
</style>


